<template>
    <div class="lib-box">
        <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>
                  <strong>简历制作</strong>
              </el-breadcrumb-item>
              <el-breadcrumb-item>简历模板库</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider/>
        <div class="mode-box">
            <div class="card-item" v-for="(item,index) in 10" :key="index">
                <el-card class="box-card" shadow="hover" >
                    <template #header>
                    <div class="card-header">
                        <strong>简单简历模板</strong>
                        <el-button class="button" type="primary">点击编辑简历</el-button>
                    </div>
                    </template>
                    <img src="../../assets/images/resumeMode1.jpg" alt="" width="380" height="500">
                </el-card>
            </div>  
        </div>
        <el-backtop :right="50" :bottom="50" target=".mode-box"/>
    </div>
</template>

<script>
</script>

<style lang="less" scoped>
.lib-box{
    width: 100%;
    height: 100%;
}
.mode-box{
    width: 100%;
    height: 90%;
    overflow-y: scroll;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    .card-item{
        width: 30%;
        margin: 20px 0 0 0;
    }
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>
